<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/tool.js"></script>
    <script src="../js/cookie.js"></script>
    <style>
        .preview-container {
            width: 1226px;
            margin: 50px auto;
            display: flex;
        }

        .preview-container .preview-wapper {
            width: 400px;
            margin-right: 20px;
            position: relative;
        }

        .preview-container .preview-wapper .preview {
            width: 400px;
            height: 400px;
            background-color: orange;
            position: relative;
        }

        .preview-container .preview-wapper .preview {
            width: 100%;
        }

        .preview-container .preview-wapper .preview .shadow {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            /* background: url(//img-tmdetail.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png); */
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .preview-container .preview-wapper .preview img {
            width: 100%;
        }

        .preview-container .preview-info {
            flex: 1;
            /* background-color: aquamarine; */
        }

        .preview-scale {
            width: 400px;
            height: 400px;
            /* background-color: rgba(125, 255, 255, 0.5); */
            position: absolute;
            left: 420px;
            top: 0;
            display: none;
            overflow: hidden;
        }

        .preview-scale img {
            width: 800px;
            height: 800px;
            position: absolute;
            left: 0;
            top: 0;
            /* z-index: -1; */
        }

        .preview-info>div {
            margin-bottom: 10px;
        }

        .header {
            width: 1226px;
            margin: 0 auto;
            background-color: #e3e4e5;
            height: 45px;
            line-height: 45px;
            font-size: 12px;
        }

        .nav li {
            float: left;
            padding: 0 10px;
        }

        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div class="header">
        <ul class="nav fl clear">
            <li>中国大陆</li>
            <li class="sign-login">
                <a href="./login.html">你好,请登录</a>
                <a href="./register.html">免费注册</a>
            </li>
            <li class="sign-user hide">
                <a class="wel" href="javascript:;">欢迎xxx</a>
                <a class="exit" href="javascript:;">退出</a>
            </li>
            <li>我的订单</li>
        </ul>
    </div>
    <div class="preview-container">
        <div class="preview-wapper">
            <!-- <div class="preview">
                <img class="smallImg" src="../images/small_1.jpg" alt="">
                <div class="shadow"></div>
            </div>
            <div class="preview-scale">
                <img class="bigImg" src="../images/big_1.jpg" alt="">
            </div>
            <ul class="preview-list">
                <li><img src="" alt=""></li>
                <li><img src="" alt=""></li>
                <li><img src="" alt=""></li>
                <li><img src="" alt=""></li>
            </ul> -->
        </div>
        <div class="preview-info">
            <!-- <h3 class="sku-name">华为 nova10 新品手机 搭载HarmonyOS2系统 10号色【256GB】 官方标配</h3>
            <div class="sku-shop">
                京东之家官方旗舰店
            </div>
            <div class="sku-price">
                秒 杀 价:￥ 2999.00
            </div>
            <div class="sku-comment">
                5000+条评价
            </div>
            <div class="sku-buy">
                <span class="reduce">-</span>
                <input type="number" class="buyNum" value="1">
                <span class="add">+</span>
            </div>
            <div class="sku-add">
                <button href="javascript:;" class="addToShoppingCar">加入购物车</button>
            </div> -->
        </div>
    </div>
</body>
<script>

    /*  var previewWapper = document.getElementsByClassName("preview-wapper")[0];
     var preview = document.getElementsByClassName("preview")[0];
     var shadow = document.getElementsByClassName("shadow")[0];
     var bigImg = document.getElementsByClassName("bigImg")[0];
     var smallImg = document.getElementsByClassName("smallImg")[0];
     var previewScale = document.getElementsByClassName("preview-scale")[0];
 
 
     var maxLeft = null;
     var maxTop = null;
     var scale = null;
 
 
     preview.onmouseenter = function () {
         shadow.style.display = "block";
         previewScale.style.display = "block";
 
         maxLeft = preview.clientWidth - shadow.clientWidth;
         maxTop = preview.clientHeight - shadow.clientHeight;
         scale = bigImg.clientWidth / smallImg.clientWidth;
         console.log(shadow.clientWidth, shadow.clientHeight, bigImg.clientWidth);
     }
     preview.onmouseleave = function () {
         shadow.style.display = "none";
         previewScale.style.display = "none";
     }
     preview.onmousemove = function (e) {
         var e = e || window.event;
         var x = e.pageX - previewWapper.offsetLeft - shadow.clientWidth / 2;
         var y = e.pageY - previewWapper.offsetTop - shadow.clientHeight / 2;
 
         x = Math.min(Math.max(0, x), maxLeft);
         y = Math.min(Math.max(0, y), maxTop);
 
         shadow.style.left = x + "px";
         shadow.style.top = y + "px";
 
         bigImg.style.left = -scale * x + "px"
         bigImg.style.top = -scale * y + "px"
 
     } */

</script>
<script>

    // 1. 列表跳详情 url?gid=xxx
    // 2. 根据gid渲染商品数据
    // 3. 加入购物车之前判断用户是否登录
    // 4. 加入购物车

    $(async function () {

        var signLogin = document.getElementsByClassName("sign-login")[0];
        var signUser = document.getElementsByClassName("sign-user")[0];
        var wel = document.getElementsByClassName("wel")[0];
        var exit = document.getElementsByClassName("exit")[0];

        // 标识用户身份
        var lgc = getCookie("lgc");
        if (lgc) {
            signUser.classList.remove("hide");
            signLogin.classList.add("hide");

            wel.textContent = "欢迎," + lgc;

            exit.onclick = function () {
                setCookie("lgc", "", -1);
                location.reload();
            }
        }





        var gid = queryUrl("gid");
        if (gid) { // 如果地址栏中没有gid => 人为删除 => 滚去首页
            var res = await searchGoodsById({ gid });
            var { status, message, data } = res;
            console.log(res);

            if (status) {
                var { g_img, g_link, g_list, g_name, g_price, g_shop, g_comment } = data;

                $(".preview-wapper").html(`
                    <div class="preview">
                        <img class="smallImg" src="${g_img}" alt="">
                        <div class="shadow"></div>
                    </div>
                    <div class="preview-scale">
                        <img class="bigImg" src="${g_img}" alt="">
                    </div>
                    <ul class="preview-list">

                    </ul>`);

                $(".preview-info").html(`
                    <h3 class="sku-name">${g_name}</h3>
                    <div class="sku-shop">
                        ${g_shop}
                    </div>
                    <div class="sku-price">
                        秒 杀 价:￥ ${g_price}
                    </div>
                    <div class="sku-comment">
                        ${g_comment}
                    </div>
                    <div class="sku-buy">
                        <span class="reduce">-</span>
                        <input type="number" class="buyNum" value="1">
                        <span class="add">+</span>
                    </div>
                    <div class="sku-add">
                        <button href="javascript:;" class="addToShoppingCar">加入购物车</button>
                    </div>`)




                // 加入购物车需要知道?
                // 谁?  买了什么东西? 买了多少件?
                // 谁?           => 当前登录的用户
                // 买了什么东西?  => 商品信息(对应gid)
                // 买了几件?      => 买了几件商品


                $(".addToShoppingCar").click(async function () {
                    // 谁? => 当前登录的用户 => 存储在cookie中
                    // a. 已登录 (获取cookie)
                    // b. 没有登录 (去登录)
                    var lgc = getCookie("lgc");
                    console.log(lgc);

                    if (lgc) {
                        var res = await addToShoppingCar({ user: lgc, gid, buy: $(".buyNum").val() });

                        console.log(res);

                        var { status, message } = res;
                        if (status) {
                            if (confirm("购买成功,是否进入购物车?")) {
                                location.href = "./car.html"
                            }

                        } else {
                            throw err;
                        }


                    } else {
                        // 页面跳转时可以传参 => returnUrl存储当前页
                        location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
                    }


                })





            } else {
                throw message;
            }





        } else {
            location.href = "./index.html";
        }

    })

</script>

</html>